@import "../../assets/variables.sass";

$taginput-margin-top-bottom: .5rem
$taginput-margin-left-right: .75rem
$tag-margin-right: .4rem
$tag-margin-bottom: .2rem
$label-padding: .2rem .5rem
$remove-padding: .2rem .4rem
$input-padding: .2rem 0

.TagsInput
  margin-bottom: 10px;
  padding: $taginput-margin-top-bottom $taginput-margin-left-right;
  padding-bottom: $taginput-margin-top-bottom - $tag-margin-bottom;
  border: 1px solid #ccc;
  border-radius: .4rem;
  .placeholder
    color: #ccc;
  .tag
    float: left;
    margin-right: $tag-margin-right;
    margin-bottom: $tag-margin-bottom;
    border-radius: .4rem;
    background-color: #eee;
    &:hover
      background-color: #ddd;
    .label
      float: left;
      padding: $label-padding;
      border-radius: .4rem 0 0 .4rem;
    .remove
      float: left;
      padding: $remove-padding;
      border-left: 1px solid white;
      border-radius: 0 .4rem .4rem 0;
      color: #999;
      cursor: pointer;
      &:hover
        background-color: $brand;
        color: white;
  .dropdown
    float: left;
    position: relative;
    .dropdown-input
      margin-bottom: $tag-margin-bottom;
      padding: $input-padding;
      width: 6rem;
      height: 2rem;
      border: none;
      outline: none;
    .dropdown-menu
      position: absolute;
      left: 0;
      top: 2rem;
      display: block;

      
